<template>
  <!-- <view class="page">
    <view
      class="card"
      v-for="(item, k) in list"
      :key="k"
      @click="getmail(item)"
    >
      <view class="left">
        <view> {{ item.name }} </view>
        <view class="default" v-if="item.defaultInfo == 1"> 默认 </view>
      </view>
      <view class="edit" @click.stop="edit(item)"> 编辑 </view>
    </view>
    <view class="padding flex flex-direction add">
      <button class="cu-btn blue margin-tb-sm lg" @click="add">添加</button>
    </view>
  </view> -->
  <view class="checkin-process PA-list">
    <view class="line"></view>
    <view class="none" v-if="list.length == 0">
      <image src="../../static/img/zwjl.png" alt="" class="zwkf" />
    </view>
    <view v-else>
      <view>
        <view
          class="bcard"
          v-for="(item, k) in list"
          :key="k"
          @click="getmail(item)"
        >
          <view class="left-line"></view>
          <view class="content">
            <view class="bt">
              <text class="hotel-name">{{ item.name }}</text>
              <text class="default" v-if="item.defaultInfo == 1"> 默认 </text>
            </view>

            <view class="br">
              <view class="bbtn delete" @click.stop="cancel(item)"> 删除 </view>
              <view class="bbtn edit" @click.stop="edit(item)"> 编辑 </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="badd-box">
      <view class="badd" @click="add">
        <image src="/static/img/add.png" mode="widthFix"></image>
        <text class="add">添加</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      type: "",
    };
  },
  methods: {
    add() {
      uni.navigateTo({
        url: "/pages/addmail/addmail?type=add",
      });
    },
    edit(v) {
      uni.navigateTo({
        url: "/pages/addmail/addmail?type=edit&data=" + JSON.stringify(v),
      });
    },
    getlist() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.$http
        .get(
          "/tenant/contacts/selectAll",
          {
            phoneNumber: uni.getStorageSync("phone"),
          },
          {
            header: {
              "content-type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          uni.hideLoading();
          let data = res.data;
          if (data.code == 0) {
            this.list = data.data;
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
    getmail(v) {
      if (this.type == "select") {
        uni.setStorageSync("mail", v);
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    cancel(val) {
      uni.showModal({
        title: "提示",
        content: "确定删除吗？",
        success: (res) => {
          if (res.confirm) {
            this.$http
              .post(
                "/tenant/contacts/delete",
                {
                  tenantContactsInfoId: val.tenantContactsInfoId,
                  id: val.id,
                },
                {
                  header: {} /* 会覆盖全局header */,
                  dataType: "json",
                  responseType: "text",
                }
              )
              .then((res) => {
                console.log(res);
                let data = res.data;
                if (data.code == 0) {
                  console.log(data.data);
                  uni.showToast({
                    image: "/static/img/success.png",
                    title: "删除成功",
                    duration: 1000,
                  });
                  this.getlist();
                } else {
                  uni.showToast({
                    image: "/static/img/warn.png",
                    title: data.msg,
                    duration: 1000,
                  });
                }
              })
              .catch((err) => {});
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
  onLoad(options) {
    this.type = options.type;
  },
  onShow() {
    this.getlist();
  },
};
</script>
<style>
page {
  /* background-color: #f1f1f1; */
}
</style>
<style scoped>
.PA-list {
  min-height: 100%;
  height: auto;
  padding-bottom: 40px;
  background: #fff;
  padding-top: 10px;
}
.avatar {
  border-radius: 50%;
  height: 100%;
  width: 100%;
}
.userinfo {
  position: relative;
  width: 750rpx;
  height: 320rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  overflow: hidden;
  display: block;
  width: 160rpx;
  height: 160rpx;
  margin: 20rpx;
  margin-top: 50rpx;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.userinfo {
  /* color: #fff; */
  font-size: 14px;
  background-color: #c0c0c0;
}
.header {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.scroll {
  /* margin-top: 40px; */
  padding-bottom: 140upx;
  padding-top: 40upx;
}
.dateshow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 115rpx;
}
.dateshow view {
  background: #bdbdbd;
  padding: 5px;
  border-radius: 4px 4px 4px 4px;
  color: white;
}
.bcard {
  margin: 0px 24upx 24upx 24upx;
  background: #fff;
  border: 1upx solid rgba(245, 245, 245, 1);
  box-shadow: 4upx 7upx 10upx 0upx rgba(0, 0, 0, 0.1);
  border-radius: 16upx;
  padding: 25upx;
  position: relative;
  position: relative;
}
.left-line {
  position: absolute;
  left: 0upx;
  top: 0upx;
  width: 8upx;
  height: 66upx;
  background: #6585f2;
  border-radius: 16upx 0upx 0upx 0upx;
}
.bt {
  font-size: 24upx;
  height: 28upx;
  line-height: 28upx;
}
.hotel-name {
  color: #000;
  font-size: 15px;
}
.room-num {
  padding-left: 18upx;
  color: #797979;
}
.bc {
}
.binfo {
  color: #000;
  padding-top: 8upx;
}
.pname {
  font-size: 32upx;
}
.phone {
  font-size: 24upx;
}
.btime {
  color: #797979;
  font-size: 24upx;
  padding-top: 12upx;
}
.br {
  height: 100upx;
  text-align: right;
}
.br .bbtn {
  display: inline-block;
  width: 120upx;
  height: 50upx;
  line-height: 50upx;
  box-sizing: border-box;
  text-align: center;
  border-radius: 25upx;
  margin-top: 30upx;
  margin-left: 20upx;
}
.br .delete {
  border: 1upx solid #ff3333;
  color: #ff3333;
}
.br .edit {
  border: 1upx solid #4e6dd2;
  color: #4e6dd2;
}
.renewal {
  border: 1upx solid #ff9125;
  color: #ff9125;
}
.PA-list {
  /* position: relative; */
}
.PA-list .badd-box {
  height: 124upx;
  padding-top: 20upx;
  width: 100%;
  background: #fff;
  position: fixed !important;
  left: 0%;
  bottom: 0upx;
}
.PA-list .badd {
  height: 64upx;
  width: 156upx;
  background: #6585f2;
  border-radius: 32upx;
  padding: 0 24upx 0upx 80upx;
  line-height: 64upx;
  position: relative;
  margin-left: 297upx;
}
.badd .add {
  font-size: 24upx;
  color: #fff !important;
}
.badd image {
  height: 36upx;
  width: 36upx;
  position: absolute;
  left: 24upx;
  top: 15upx;
}
.rolename {
  font-size: 24upx;
  color: #ff9125;
  padding-left: 10upx;
  padding-right: 10upx;
}
.zwkf {
  width: 380upx;
  height: 380upx;
  margin-top: 208upx;
}
.none {
  margin: auto;
  display: flex;
  justify-content: center;
}
.default {
  margin-left: 10px;
  color: red;
  font-size: 13px;
}
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
